import React from "react";
import { useState, useEffect } from "react";
import { Calendar,  Radio } from "antd";
import type { Moment } from "moment";
import LunarCalendar from "lunar-calendar";
import zhCN from "antd/lib/calendar/locale/zh_CN";
import enUS from "antd/lib/calendar/locale/en_US";
import { useEnergyDay } from "./utils/useEnergyDay";
import "./index.less";
import 'moment/locale/zh-cn';

const ScCalendar: React.FC<any> = () => {
  // const API_KEY = "4dd0318ae5c9a8a7019b56884b039425c8c88e7e";
  // const COUNTRY = "CN";
  const [currentYear, setCurrentYear] = useState<number>(
    new Date().getFullYear()
  );
  const energyDays = useEnergyDay(new Date(2023, 6, 22));
  console.log(energyDays);
  const LANG_MAP = {
    "zh-cn": zhCN,
    "en-us": enUS,
  };
  const [currentLocale, setCurrentLocale] = useState<"zh-cn" | "en-us">(
    "zh-cn"
  );
  // const [holidayList, setHolidayList] = useState<Array<string>>();
  // const [holidayTotalList, setHolidayTotalList] = useState<Array<holiday>>();
  const holidayList=['2022-12-31','2023-01-01','2023-01-02','2023-01-21','2023-01-22','2023-01-23','2023-01-24',
  '2023-01-25','2023-01-26','2023-01-27','2023-04-05','2023-04-29','2023-04-30',
  '2023-05-01','2023-05-02','2023-06-22','2023-06-23','2023-06-24','2023-09-29','2023-09-30','2023-10-01','2023-10-02',
  '2023-10-03','2023-10-04','2023-10-05','2023-10-06']
  const workdayList=['2023-01-28','2023-01-29','2023-04-23','2023-05-06','2023-06-25','2023-10-07','2023-10-08']
  const holidayTotalList=[
    {
      dateTime:'2022-12-31',
      name:'元旦'
    },
    {
    dateTime:'2023-01-01',
    name:'元旦'
  },
  {
    dateTime:'2023-01-02',
    name:'元旦'
  },
  {
    dateTime:'2023-01-21',
    name:'春节'
  },
  {
    dateTime:'2023-01-22',
    name:'春节'
  },
  {
    dateTime:'2023-01-23',
    name:'春节'
  },
  {
    dateTime:'2023-01-24',
    name:'春节'
  },
  {
    dateTime:'2023-01-25',
    name:'春节'
  },
  {
    dateTime:'2023-01-26',
    name:'春节'
  },
  {
    dateTime:'2023-01-27',
    name:'春节'
  },
  {
    dateTime:'2023-04-05',
    name:'劳动节'
  },
  {
    dateTime:'2023-04-29',
    name:'劳动节'
  },
  {
    dateTime:'2023-04-30',
    name:'清明节'
  },
  {
    dateTime:'2023-05-01',
    name:'劳动节'
  },
  {
    dateTime:'2023-05-02',
    name:'劳动节'
  },
  {
    dateTime:'2023-06-22',
    name:'端午节'
  },
  {
    dateTime:'2023-06-23',
    name:'端午节'
  },
  {
    dateTime:'2023-06-24',
    name:'端午节'
  },
  {
    dateTime:'2023-09-29',
    name:'中秋节'
  },
  {
    dateTime:'2023-09-30',
    name:'国庆节'
  },
  {
    dateTime:'2023-10-01',
    name:'国庆节'
  },
  {
    dateTime:'2023-10-02',
    name:'国庆节'
  },
  {
    dateTime:'2023-10-03',
    name:'国庆节'
  },
  {
    dateTime:'2023-10-04',
    name:'国庆节'
  },
  {
    dateTime:'2023-10-05',
    name:'国庆节'
  },
  {
    dateTime:'2023-10-06',
    name:'国庆节'
  },
  
]
  const onPanelChange = (value: Moment, ) => {
    console.log(value.format("YYYY"));
    setCurrentYear(Number(value.format("YYYY")));
  };
  const dateCellRender = (date: Moment) => {
    function isHoliday(date: Moment) {
      return holidayList?.includes(date.format("YYYY-MM-DD"));
    }
    function isEnergyDay(date: Moment) {
      return energyDays?.includes(date.format("YYYY-MM-DD"));
    }
    function isWorkDay(date:Moment){
      return workdayList?.includes(date.format("YYYY-MM-DD"));
    }
    function findHoliday(date: Moment) {
      const dateTime = date.format("YYYY-MM-DD");
      const currentHoliday = holidayTotalList.find((holiday) => {
        return holiday?.dateTime === dateTime;
      });
      console.log(currentHoliday);
      return currentHoliday?.name;
    }
    const lunarDate = LunarCalendar.solarToLunar(
      date.year(),
      date.month() + 1,
      date.date()
    );

    const lunarDateString = `${lunarDate.lunarDayName}`;
    const ganzhiDateString = `${lunarDate.GanZhiMonth}${lunarDate.GanZhiDay}`;
    return (
      <div className="sc-calendar-body-cell">
        {/* 显示农历日期 */}
        <div className="sc-calendar-body-cell-lunar">
          {lunarDateString}
        </div>{" "}
        {/* 显示农历日期 */}
        <div className="sc-calendar-body-cell-ganzhi">
          {ganzhiDateString}
        </div>{" "}
        {isHoliday(date) && (
          <div className="sc-calendar-body-cell-holiday">
            <span className="sc-calendar-body-cell-holiday-icon">休</span>
            <span className="sc-calendar-body-cell-holiday-name">
              {findHoliday(date)}
            </span>
          </div>
        )}
         {isEnergyDay(date) && (
          <div className="sc-calendar-body-cell-energy">
            <span className="sc-calendar-body-cell-energy-icon">能</span>
          </div>
        )}
        {isWorkDay(date) && (
          <div className="sc-calendar-body-cell-work">
            <span className="sc-calendar-body-cell-work-icon">班</span>
          </div>
        )}
      </div>
    );
  };

  const onLanguageChange = (e) => {
    setCurrentLocale(e.target.value);
  };
  // function processHolidays<T>(data): T[] {
  //   const array = [];
  //   data?.response?.holidays.forEach((holiday, index) => {
  //     holiday.dateTime = holiday?.date?.iso;
  //     array.push(holiday.dateTime);
  //   });
  //   return array;
  // }
  // useEffect(() => {
  //   function getCurrentYearHolidays() {
  //     fetch(
  //       `https://calendarific.com/api/v2/holidays?api_key=${API_KEY}&country=${COUNTRY}&year=${currentYear}&language=${currentLocale.substring(
  //         0,
  //         2
  //       )}`,
  //       { method: "get" }
  //     )
  //       .then((res) => {
  //         console.log(res);
  //         return res.json();
  //       })
  //       .then((data) => {
  //         const holidayList = processHolidays<any>(data);
  //         console.log(holidayList);
         
  //         console.log(data);
          
  //       });
  //   }
  //   getCurrentYearHolidays();
  // }, [currentYear, currentLocale]);

  return (
    <div className="sc-calendar">
      <Radio.Group
        className="sc-calendar-lang"
        onChange={onLanguageChange}
        value={currentLocale}
      >
        <Radio.Button value="zh-cn">中式</Radio.Button>
        <Radio.Button value="en-us">EN_Mode</Radio.Button>
      </Radio.Group>

      <Calendar
        className="sc-calendar-body"
        locale={LANG_MAP[currentLocale]}
        dateCellRender={dateCellRender}
        onPanelChange={onPanelChange}
      />
    </div>
  );
};
export default ScCalendar;
